<template>
  <view class="programme-card">
    <view class="programme-card-title-container">
      <view class="title">{{ detail.p_plan }}</view>
      <mark-box class="mark" :text="progress"></mark-box>
    </view>
    <view class="programme-card-detail">
      <view class="left">
        <text>方案开期数:</text>
        <text>{{ detail.p_qihao_begin }}期</text>
      </view>
      <view class="right">
        <text>{{ detail.p_name }}</text>
      </view>
    </view>
    <hold-back-card
      class="programme-card-content"
      :boldCode="detail.dan"
      :towingCodeList="towingCodeList"
    ></hold-back-card>
    <view class="programme-card-user-container">
      <view class="user">
        <!-- <image src="../../static/form/choose.png" mode=""></image> -->
        <view class="avatar-container">
          <image
            class="avatar"
            :src="detail.m_avatar"
            v-if="detail.m_avatar"
          ></image>
        </view>
        <view class="info">
          <view class="name">{{ detail.m_real_name }}</view>
          <view class="more">更多案例查看 ></view>
        </view>
      </view>
      <view class="button" @click="handleClick">
        验号
      </view>
    </view>
  </view>
</template>

<script>
import HoldBackCard from '../hold-back-card/hold-back-card.vue'
import MarkBox from '../hold-back-card/hold-back-card.vue'

export default {
  props: {
    detail: {
      type: Object,
      default: () => ({
        p_name: '',
        p_plan: '',
        p_qihao_begin: '',
        p_qishu: '',
        p_jindu: '',
        p_per_qi_money: '',
        p_dan: '',
        p_tuo: '',
      }),
    },
  },
  components: {
    HoldBackCard,
    MarkBox,
  },
  computed: {
    towingCodeList() {
      return this.detail.tuo ? this.detail.tuo.split(',') : []
    },
    progress() {
      const { p_jindu, p_qishu } = this.detail
      return `进度${p_jindu}/${p_qishu}`
    },
  },
  methods: {
    handleClick() {
      this.$emit('check', this.detail)
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
